<template>
  <div class="recharge-ticket-container">
    <!-- 左侧选择内容 -->
    <div class="ticket-settings">
      <h3>请选择在“充值小票”上显示的内容</h3>
      <el-form label-width="100px">
        <!-- 标题 -->
        <el-form-item label="标题">
          <el-checkbox v-model="showStoreName">门店名称</el-checkbox>
          <el-checkbox v-model="showWelcomeMessage">头部欢迎语</el-checkbox>
          <el-checkbox v-model="showTicketType">票据类型</el-checkbox>
        </el-form-item>
        <el-form-item v-if="showWelcomeMessage" label="设置文案">
          <el-input v-model="welcomeMessage" placeholder="欢迎光临"></el-input>
        </el-form-item>

        <!-- 订单信息 -->
        <el-form-item label="订单信息">
          <el-checkbox v-model="showOrderNumber">订单编号</el-checkbox>
          <el-checkbox v-model="showRechargeTime">充值时间</el-checkbox>
        </el-form-item>

        <!-- 会员信息 -->
        <el-form-item label="会员信息">
          <el-checkbox v-model="showMemberName">会员姓名</el-checkbox>
          <el-checkbox v-model="showContactNumber">联系电话</el-checkbox>
          <el-checkbox v-model="showMemberCard">会员卡号</el-checkbox>
        </el-form-item>

        <!-- 充值信息 -->
        <el-form-item label="充值信息">
          <el-checkbox v-model="showRechargeDetails">充值详情</el-checkbox>
        </el-form-item>

        <!-- 补充信息 -->
        <el-form-item label="补充信息">
          <el-checkbox v-model="showStoreAddress">门店地址</el-checkbox>
          <el-checkbox v-model="showStorePhone">门店电话</el-checkbox>
<!--          <el-checkbox v-model="showOfficialQR">公众号二维码</el-checkbox>-->
<!--          <el-checkbox v-model="showMiniProgramQR">小程序二维码</el-checkbox>-->
        </el-form-item>

        <el-form-item v-if="showEndMessage" label="结束致谢语">
          <el-input v-model="endMessage" placeholder="欢迎再次光临"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 右侧预览 -->
    <div class="ticket-preview">
      <el-card class="ticket-card">
        <h3>充值单</h3>
        <div class="ticket-content">
          <div v-if="showStoreName" class="ticket-header">
            <p>门店名称：{{ storeName }}</p>
          </div>
          <div v-if="showWelcomeMessage" class="ticket-header">
            <p>{{ welcomeMessage }}</p>
          </div>
          <div v-if="showOrderNumber" class="ticket-items">
            <p>订单编号：{{ orderNumber }}</p>
          </div>
          <div v-if="showRechargeTime" class="ticket-items">
            <p>支付时间：{{ paymentTime }}</p>
          </div>
          <div v-if="showMemberName" class="ticket-items">
            <p>会员名称：{{ memberName }}</p>
          </div>
          <div v-if="showContactNumber" class="ticket-items">
            <p>电话号码：{{ contactNumber }}</p>
          </div>
          <div v-if="showMemberCard" class="ticket-items">
            <p>会员卡号：{{ memberCard }}</p>
          </div>
          <div v-if="showRechargeDetails" class="ticket-items">
            <p>实充金额：{{ rechargeAmount }}</p>
            <p>当前余额：{{ currentBalance }}</p>
          </div>
          <div v-if="showStoreAddress" class="ticket-items">
            <p>门店地址：{{ storeAddress }}</p>
          </div>
          <div v-if="showStorePhone" class="ticket-items">
            <p>门店电话：{{ storePhone }}</p>
          </div>
          <div v-if="showOfficialQR" class="ticket-items">
            <p>公众号二维码：</p>
            <!-- 这里可以放置二维码图片 -->
          </div>
          <div v-if="showMiniProgramQR" class="ticket-items">
            <p>小程序二维码：</p>
            <!-- 这里可以放置二维码图片 -->
          </div>
          <div v-if="showEndMessage" class="ticket-items">
            <p>{{ endMessage }}</p>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 预览数据
      orderNumber: "N201601292218",
      paymentTime: "2019-3-9 10:45:53",
      memberName: "朱伟琦（会员）",
      contactNumber: "13621520989",
      memberCard: "N79772090",
      rechargeAmount: "¥200.0",
      currentBalance: "¥220.0",
      storeName: "示例门店",
      storeAddress: "示例地址",
      storePhone: "示例电话",
      welcomeMessage: "欢迎光临",
      endMessage: "欢迎再次光临",

      // 显示控制
      showStoreName: true,
      showWelcomeMessage: true,
      showTicketType: false,
      showOrderNumber: true,
      showRechargeTime: true,
      showMemberName: true,
      showContactNumber: true,
      showMemberCard: true,
      showRechargeDetails: true,
      showStoreAddress: false,
      showStorePhone: false,
      showOfficialQR: false,
      showMiniProgramQR: false,
      showEndMessage: true,
    };
  },
  methods: {
    cancel() {
      // 取消操作
      this.$emit("cancel");
    },
    save() {
      // 保存操作
      this.$emit("save");
    },
  },
};
</script>

<style scoped>
.recharge-ticket-container {
  display: flex;
  margin: 20px;
}

.ticket-settings {
  width: 50%;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.ticket-preview {
  width: 50%;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-left: 20px;
}

.ticket-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
}

.ticket-content {
  margin-bottom: 20px;
}

.ticket-header {
  margin-bottom: 15px;
}

.ticket-items {
  margin-bottom: 15px;
}
</style>
